<template>
	<view class="swiper-normal">
		<swiper class="swiper-cons" circular :indicator-dots="false" :autoplay="isPlay" :interval="interval"
			:duration="duration" indicator-color='rgba(255,255,255,0.6)' indicator-active-color='rgba(255,255,255,0.9)' @change=
			"swiperChange" >
			<template v-for="item in content">
				<swiper-item class="swiper-item"  v-if="item[alias.type]==1">
					<image :src="item[alias.url]"></image>
				</swiper-item>
				<swiper-item class="swiper-item"  v-if="item[alias.type]==2">
					<video object-fit='cover' :src="item[alias.url]" :autoplay="false" :show-fullscreen-btn="false" :poster='item.cover'></video>
				</swiper-item>
			</template>
		</swiper>
		<div class="dlist">
			<view class="indicator-cus" :style="cusDotsStyle" v-if="dots">
				{{index+1}}/{{content.length}}
			</view>
		</div>
		<slot></slot>
	</view>
</template>

<script>
	export default{
		props:{
			content:{
				type:Array,
				default:()=>[]
			},
			alias:{
				type:Object,
				default:{}
			},
			dots:{
				type:Boolean,
				default:true
			},
			autoplay:{
				type:Boolean,
				default:true
			},
			pageType:{
				type:String,
				default:'index'
			},
			interval:{
				type:Number,
				default:2000
			},
			duration:{
				type:Number,
				default:500
			},
			height:{
				type:Number,
				default:240
			},
			border:{
				type:Boolean,
				default:true
			},
			cusDotsStyle:{
				type:String,
				default:''
			}
		},
		watch:{
			'autoplay':{
				immediate: true,
				deep: true,
				handler(news){
					this.isPlay = news
				}
			}
		},
		data(){
			return {
				index: 0,
				isPlay: false
			}
		},
		methods:{
			toSkip(item){
				
			},
			swiperChange(e){
				this.index = e.detail.current
				this.$emit('change', this.index)
			}
		}
	}
</script>

<style scoped>
	.swiper-normal {
		width: 100vw;
		box-sizing: border-box;
		position: relative;
	}
	.swiper-cons{
		width: 100%;
		height: 50vh;
		background: #B79090;
		overflow: hidden;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	
	.swiper-item image{
		display: block;
		width: 100%;
		height: 100%;
	}
	.swiper-item video {
		width: 100%;
		height: 100%;
	}
	.dlist {
		display: flex;
		justify-content: flex-end;
		padding: 60rpx 20rpx;
	}
	.indicator-cus{
		width: 80rpx;
		height: 46rpx;
		background: rgba(0,0,0,0.5);
		border-radius: 46rpx;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 28rpx;
	}
</style>
